import React, { useState, createContext, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import { useLocalStorage, useWindosScroll } from './hooks'
import './App.css'
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './About'
import Layout from './layouts/Layout'
import Article from './pages/Article'
import Board from './pages/Pbulish'
import NotFound from './pages/NotFound'
import { useRoutes } from 'react-router-dom'

const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        element: <Home />,
        index: true, // 二级路由，默认路由
      },
      {
        path: 'board',
        element: <Board />,
      },
      {
        path: 'article',
        element: <Article />,
      },
    ],
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '*',
    element: <NotFound />,
  },
]
// 2.使用 useRoutes 生成 Routes 组件
function WrapperRoutes() {
  let element = useRoutes(routes)
  return element
}
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        {/* 3.替换路由 */}
        <WrapperRoutes />
        {/* <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />}></Route>
            <Route path="board" element={<Board />}></Route>
            <Route path="article" element={<Article />}></Route>
          </Route>
          <Route path="/about/:id?" element={<About></About>}></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes> */}
      </BrowserRouter>
    </div>
  )
}

export default App
